<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>


<script type="text/javascript">
	$(document).ready(function() {
		$('.digitsOnly').mask('0000000000', {reverse: true});	
		$("#createDate").datepicker({
			dateFormat : "dd/mm/yy",
			showAnim : "slide"
		}); 		
		$("#qty").blur(function() {
			 var a = parseFloat($("#qty").val());
			 $("#qty").val(a);
			 calTotal($("#qty").val(),$("#price").val());
		});
		$("#price").blur(function() {
			var b = parseFloat($("#price").val());
			$("#price").val(b);
			 calTotal($("#qty").val(),$("#price").val());
		});		
		function calTotal(a,b){
			if (a.length != 0 && b.length != 0) {
				var c = parseFloat(a)*parseFloat(b);
				$("#total").val(c);
			}
		}
		$("#btnSave").easyconfirm({
			locale : {
				width : 220,
				title : 'Confirmation',
				text : 'ต้องการบันทึกข้อมูล ?',
				button : [ 'No', 'Yes' ]
			}
		});

		$("#btnSave").click(function() {
			$('.required').unValidate();
			if (validate2()) {
				if(validate2){
					var data = $('#costSheetModel :input').formValues();
					//alert(data);return;
					$.ajax({
						type : 'POST',
						url : '../cs/save',
						dataType : 'json',
						data : data,
						success : function(json) {
							if (json.status == 'OK') {
								$("<div>บันทึกข้อมูลเรียบร้อย</div>").message();
								$("#id").val(0);
								clear();
								//window.location.href = "../cs/home";
							}
						}
					});
				}
			}
		});
		$("#btnClear").click(function() {
			clear();			
		});
	});
	function validate2(){
		var f = null;
		var errormsg = 'This field is required!';
		$(".required").each(function() {
			var parent = $(this).parent();
			if ($(this).val() == '' || $(this).val() == 0  || $(this).val().length == 0) {
				$(this).css("background-color", "#ffe2d3");
				$(this).attr("placeholder", errormsg);
				$(this).effect("slide"); // highlight,shake,slide
				if (f == null) {
					f = $(this);
				}
			}
		});
		if (f != null) {
			f.focus();
			return false;
		}
		return true;
	}
	function clear(){
		$("input#projectId").clear();
		$("input#projectName").clear();
		$("#accSiteModel\\.accId").clear();
		$("input#qty").clearNum();
		$("input#price").clearNum();
		$("input#total").clearNum();
		$("input#name").clear();		
		$("#departmentModel\\.code").clear();
		$("input#name").clear();	
		$("#createDate").clearDate();
		$("#code").val("");
	}	
</script>
<div id="container" style="width: 98%">
	<form id="costSheetModel" action="../cs/save.action">
			<table class="from" cellpadding="0" cellspacing="0" border="0" style="width: 100%;">
				<tr>
					<td colspan="5" class="header2" style="border-bottom: 1px #bbb solid;">บันทึก Internal Cost</td>
				</tr>
			</table>
			<table class="from" cellpadding="0" cellspacing="0" border="0" style="width: auto;">
				<tr>
					<td width="120px;" class="header">Project ID </td>
					<td width="100px;" align="left">
						<s:hidden name="costSheetModel.id" id="id"/>
						<s:textfield id="projectId" name="costSheetModel.projectId" size="100" maxlength="10" cssClass="digitsOnly required"  cssStyle="width:100px;"/>
					</td>
					<td width="120px;" class="header">Project name </td>
					<td colspan="2" align="left">
						<s:textfield id="projectName" name="costSheetModel.projectName" cssClass="required" size="100" maxlength="200"  cssStyle="width:300px;"/>
					</td>
				</tr>
				<tr>
					<td width="120px;" class="header">Account Name </td>
					<td align="left">
						<s:select headerKey=""
						headerValue="--กรุณาเลือก--" id='accSiteModel.accId' cssClass="required"
						name="costSheetModel.accSiteModel.accId" list="accountList"
						listKey="accId" listValue="accountName" 
						style="width: 210px;" />
					</td>
					<td width="120px;" class="header">Date </td>
					<td align="left">
						<s:textfield name="costSheetModel.createDate" id="createDate" cssClass="required" size="8" maxlength="10" cssStyle="width:100px;"/>
					</td>
					<td width="200px;"></td>
				</tr>
				<tr>
					<td width="120px;" class="header">Qty </td>
					<td colspan="3" align="left">
					<s:number name=""/>
						<s:textfield id="qty" name="costSheetModel.qty" size="100px;" maxlength="10" cssClass="digitsOnly required" cssStyle="width:100px;"/>
					</td>
				</tr>
				<tr>
					<td width="120px;" class="header">Price </td>
					<td colspan="3" align="left">
						<s:textfield id="price" name="costSheetModel.price" size="100px;" maxlength="10" cssClass="digitsOnly required" cssStyle="width:100px;"/>
					</td>
				</tr>
				<tr>
					<td width="120px;" class="header">Total </td>
					<td colspan="3" align="left">
						<s:textfield id="total" name="costSheetModel.total" size="100" disabled="true" cssClass="digitsOnly required" cssStyle="width:100px;"/>
					</td>
				</tr>
				<tr>
					<td width="120px;" class="header">แผนก </td>
					<td colspan="3" align="left">
					<s:select headerKey=""
						headerValue="--กรุณาเลือก--" id='departmentModel.code' cssClass="required"
						name="costSheetModel.departmentModel.code" list="departmentList" cssStyle="border"
						listKey="code" listValue="name"
						style="width: 210px;" />
					</select>
					</td>
				</tr>
				<tr>
					<td width="120px;" class="header">Name </td>
					<td colspan="3" align="left">
						<s:textfield id="name" name="costSheetModel.name" cssClass="required" size="100" maxlength="200"/>
					</td>
				</tr>
			</table>

			<table class="from" cellpadding="0" cellspacing="0" border="0" style="width: 100%;">
				<tr>
					<td colspan="5" class="header2" style="border-bottom: 1px #bbb solid;"></td>
				</tr>
			</table>
			<div style="width: 100%; text-align: center; padding-top: 10px;">
				<table class="from" cellpadding="0" cellspacing="0" border="0" style="width: auto;">
					<td><a href="javascript:void(0);" class="button" id="btnSave"> บันทึก </a>
					<td><a href="javascript:void(0);" class="button" id="btnClear"> เคลียร์ </a></td>
					<td><a href="../cs/home" class="button" id="btnBack"> ย้อนกลับ </a></td>
				</table>
			</div>
			</form>
</div>
